<template>
  <h3 style="height: 30px; font-size: large">
    输入参数
    <a-button class="editable-add-btn" type="primary" style="margin-left: 3%; border-radius: 5px; height: 30px" @click="handleAdd">新增参数</a-button>
  </h3>
  <a-table row-key="apcCode" :rules="rules" :pagination="false" :columns="columns" :data-source="paramList" bordered>
    <!-- 必填字段 -->
    <template #headerCell="{ column }">
      <!-- 表头 -->
      <template v-if="['apcName', 'apcPosition', 'apcDataType', 'apcDataNull'].includes(column.dataIndex)">
        <span>
          <i style="font-size: 16px; color: red">*</i>
          {{ column.title }}
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, text, record }">
      <!-- 参数名称 -->
      <template v-if="['apcName'].includes(column.dataIndex)">
        <a-form-item
          v-if="editableData[record.apcCode]"
          :label-col="{
            xs: { span: 0 },
            sm: { span: 0 },
          }"
          :wrapper-col="{
            xs: { span: 24 },
            sm: { span: 24 },
          }"
          :validate-status="editableData[record.apcCode][column.verification].status"
          :help="editableData[record.apcCode][column.verification].message"
        >
          <a-input v-model:value="editableData[record.apcCode][column.dataIndex]" @change="handleChange(editableData[record.apcCode], column.dataIndex)" />
        </a-form-item>
        <template v-else>
          {{ text }}
        </template>
      </template>
      <!-- 默认值、参数描述 -->
      <template v-if="['apcValue', 'apcDescription'].includes(column.dataIndex)">
        <a-form-item v-if="editableData[record.apcCode]">
          <a-input v-model:value="editableData[record.apcCode][column.dataIndex]" />
        </a-form-item>
        <template v-else>
          {{ text }}
        </template>
      </template>
      <!--  参数位置 -->
      <template v-else-if="['apcPosition'].includes(column.dataIndex)">
        <a-form-item
          v-if="editableData[record.apcCode]"
          :label-col="{
            xs: { span: 0 },
            sm: { span: 0 },
          }"
          :wrapper-col="{
            xs: { span: 24 },
            sm: { span: 24 },
          }"
          :validate-status="editableData[record.apcCode][column.verification].status"
          :help="editableData[record.apcCode][column.verification].message"
        >
          <a-select
            v-model:value="editableData[record.apcCode][column.dataIndex]"
            :allow-clear="true"
            style="width: 100%"
            :options="apcPositions"
            @change="handleChange(editableData[record.apcCode], column.dataIndex)"
          />
        </a-form-item>
        <template v-else>
          {{ text }}
        </template>
      </template>
      <!--  数据类型 -->
      <template v-else-if="['apcDataType'].includes(column.dataIndex)">
        <a-form-item
          v-if="editableData[record.apcCode]"
          :label-col="{
            xs: { span: 0 },
            sm: { span: 0 },
          }"
          :wrapper-col="{
            xs: { span: 24 },
            sm: { span: 24 },
          }"
          :validate-status="editableData[record.apcCode][column.verification].status"
          :help="editableData[record.apcCode][column.verification].message"
        >
          <a-select
            v-model:value="editableData[record.apcCode][column.dataIndex]"
            :allow-clear="true"
            style="width: 100%"
            :options="apcDataTypes"
            @change="handleChange(editableData[record.apcCode], column.dataIndex)"
          />
        </a-form-item>
        <template v-else>
          {{ text }}
        </template>
      </template>
      <!--  是否必填 -->
      <template v-else-if="['apcDataNull'].includes(column.dataIndex)">
        <a-form-item
          v-if="editableData[record.apcCode]"
          :label-col="{
            xs: { span: 0 },
            sm: { span: 0 },
          }"
          :wrapper-col="{
            xs: { span: 24 },
            sm: { span: 24 },
          }"
          :validate-status="editableData[record.apcCode][column.verification].status"
          :help="editableData[record.apcCode][column.verification].message"
        >
          <a-select
            v-model:value="editableData[record.apcCode][column.dataIndex]"
            :allow-clear="true"
            style="width: 7vw"
            :options="apcDataNulls"
            @change="handleChange(editableData[record.apcCode], column.dataIndex)"
          />
        </a-form-item>
        <template v-else>
          {{ text }}
        </template>
      </template>

      <template v-else-if="column.dataIndex === 'operation'">
        <div class="save-cancel">
          <template v-if="editableData[record.apcCode]">
            <a-form-item>
              <a-button @click="save(record)">保存</a-button>

              <a-popconfirm title="确定取消吗?" @confirm="cancel(record.apcCode)">
                <a-button>取消</a-button>
              </a-popconfirm>
              <!-- 码值定义 -->
              <template v-if="editableData[record.apcCode].apcDataType == 'String' || editableData[record.apcCode].apcDataType == 'Int'">
                <CodeDefined />
              </template>
            </a-form-item>
          </template>

          <template v-else>
            <a-button type="primary" @click="edit(record.apcCode)">编辑</a-button>
            <a-popconfirm v-if="paramList.length" title="确定取消吗？" @confirm="onDelete(record.apcCode)">
              <a-button type="dashed">删除</a-button>
            </a-popconfirm>
          </template>
        </div>
      </template>
    </template>
  </a-table>
</template>
<script lang="ts" setup>
  import CodeDefined from './codeDefined.vue';
  import { cloneDeep } from 'lodash-es';
  import type { UnwrapRef } from 'vue';
  import { Rule } from 'ant-design-vue/es/form/interface';
  import { addingApiParamterConfig } from '@/pages/CodeTables/specification';
  import { getInterfaceDetailsHooks } from '@/hooks/InterfaceManagementHooks/getInterfaceDetailsHooks';
  import { message } from 'ant-design-vue';
  // 引入hooks

  const { paramList, isValid } = getInterfaceDetailsHooks();
  // 表头
  const columns = [
    {
      title: '参数名称',
      dataIndex: 'apcName',
      verification: 'apcNameVerify',
      width: '10%',
      align: 'center',
    },
    {
      title: '参数位置',
      dataIndex: 'apcPosition',
      verification: 'apcPositionVerify',
      width: '10%',
      align: 'center',
    },
    {
      title: '数据类型',
      dataIndex: 'apcDataType',
      verification: 'apcDataTypeVerify',
      width: '10%',
      align: 'center',
    },
    {
      title: '是否必填',
      dataIndex: 'apcDataNull',
      verification: 'apcDataNullVerify',
      width: '10%',
      align: 'center',
    },
    {
      title: '默认值',
      dataIndex: 'apcValue',
      width: '10%',
      align: 'center',
    },
    {
      title: '参数描述',
      dataIndex: 'apcDescription',

      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '20%',
      align: 'center',
    },
  ];

  //验证规则
  const rules: Record<string, Rule[]> = {
    apcName: [
      {
        required: true,
        message: '请输入参数名称',
      },
    ],
    apcPosition: [
      {
        required: true,
        message: '请输入参数位置',
      },
    ],
    apcDataType: [
      {
        required: true,
        message: '请输入数据类型',
      },
    ],
    apcDataNull: [
      {
        required: true,
        message: '请输入是否必填',
      },
    ],
  };
  //参数位置
  const apcPositions = [
    {
      value: 'query',
      label: 'query',
    },
    {
      label: 'header',
      value: 'header',
    },
  ];
  //数据类型
  const apcDataTypes = [
    {
      label: 'String',
      value: 'String',
    },
    {
      label: 'Int',
      value: 'Int',
    },
    {
      label: 'Float',
      value: 'Float',
    },
  ];
  //是否必填
  const apcDataNulls = [
    {
      value: '是',
      label: '是',
    },
    {
      value: '否',
      label: '否',
    },
  ];

  // 暂存数据数组
  const editableData: UnwrapRef<Record<string, addingApiParamterConfig>> = reactive({});
  // 编辑
  const edit = (apcCode: string) => {
    editableData[apcCode] = cloneDeep(paramList.value.filter(item => apcCode === item.apcCode)[0]);
    console.log(paramList.value);
  };
  // 保存
  const save = (record: addingApiParamterConfig) => {
    let dataIndex = ['apcName', 'apcDataType', 'apcDataNull', 'apcPosition'];
    const flag = isValid(editableData[record.apcCode], dataIndex);
    console.log(flag);

    if (flag) {
      // Object.assign(record, editableData[record.apcCode]);
      record = { ...record, ...editableData[record.apcCode] };
      delete editableData[record.apcCode];
    } else {
      message.destroy();
      message.error('您还有必填项未填写！');
    }
  };
  // 取消
  const cancel = (apcCode: string) => {
    if (
      editableData[apcCode].apcDataNull == '' &&
      editableData[apcCode].apcDataType == '' &&
      editableData[apcCode].apcDescription == '' &&
      editableData[apcCode].apcName == '' &&
      editableData[apcCode].apcPosition == '' &&
      editableData[apcCode].apcValue == ''
    ) {
      paramList.value = paramList.value.filter(item => item.apcCode !== apcCode);
    }
    delete editableData[apcCode];
  };
  // 删除
  const onDelete = (apcCode: string) => {
    paramList.value = paramList.value.filter(item => item.apcCode !== apcCode);
  };
  // 新增
  const handleAdd = () => {
    const newData = {
      apcCode: `${new Date().getTime()}`,
      apcName: ``,
      apcPosition: ``,
      apcDataType: ``,
      apcDataNull: ``,
      apcValue: ``,
      apcDescription: ``,
      apcDataNullVerify: { message: '', status: 'success' },
      apcDataTypeVerify: { message: '', status: 'success' },
      apcPositionVerify: { message: '', status: 'success' },
      apcNameVerify: { message: '', status: 'success' },
    };
    paramList.value.push(newData);
    editableData[newData.apcCode] = newData;
  };
  // 用户改变输入框是触发验证
  const handleChange = (e: addingApiParamterConfig, dataIndex: string) => {
    isValid(e, [dataIndex]);
  };
</script>

<style lang="less" scoped>
  .save-cancel {
    display: flex;
    justify-content: space-evenly;
  }

  .ant-form-item {
    margin-bottom: 0;

    :deep(.ant-form-item-explain) {
      min-height: 0;
    }
  }
</style>
